import { View, Image, ITouchEvent } from "@tarojs/components";
import { ActionKeys, ActionNames, sendAction } from "@/utils/tracking";
import { Icon } from "@/components";
import { BirthStoneShape } from "@/data/birthstones/birthStoneType";
import { navigateTo } from "@/utils/navigation";
import style from "./index.module.scss";
import { useDeviceInfo } from "@/store/deviceContext";

interface BirthStoneProps {
  poster: BirthStoneShape["image"];
  link: string;
  name: string;
  closeCb: (evt?: ITouchEvent) => void;
}

export const C39BirthStone = ({
  poster,
  link,
  name,
  closeCb,
}: BirthStoneProps) => {
  const { navBarBottom } = useDeviceInfo();
  const onLinkClick = () => {
    sendAction(ActionNames.CalendarKnowMoreClick, {
      [ActionKeys.BirthStoneName]: name,
    });

    navigateTo(`pages/web-view-container/index?link=${link}&name=${name}`);
  };

  return (
    <View className={style["birth-stone-wrapper"]}>
      <Image
        onClick={onLinkClick}
        className={style.image}
        mode="widthFix"
        src={poster || ""}
      />
      <Icon
        type="CloseBlack"
        className={style.close}
        onClick={closeCb}
        style={{ top: navBarBottom }}
      />
    </View>
  );
};
